<template>
  <div>
    <div class="page-item  page-callrecords">
      <div class="page-content" ref="pageTab">
        <div class="page-tab">
          <el-form :model="selectForm" ref="selectForm"  label-width="85px" class="form">
            <template>
              <div class="block">
                <span class="demonstration">选择日期查询：</span>
                <el-date-picker
                  v-model="startDate"
                  value-format=yyyy-MM-dd
                  type="date"
                  placeholder="选择开始日期">
                </el-date-picker>

                <span class="demonstration">至</span>
                <el-date-picker
                  v-model="overdDate"
                  value-format=yyyy-MM-dd
                  align="right"
                  type="date"
                  placeholder="选择结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
                <el-button type="primary" icon="el-icon-search" class="form-btn" @click="onSelect()">搜索</el-button>
              </div>
            </template>
          </el-form>
          <!-- 表格试视图 v-if="cutLayout"-->
          <el-table
            :data="tableDataList"
            style="width: 100%;height: 60%"
            border
            :header-cell-style="{ background: '#00abbe', color: '#fff' }">
            <el-table-column prop="operatorId" label="ID" width="50" align="center"></el-table-column>
            <el-table-column align="center" prop="operatorAccount" min-width="100" label="运营商账号"></el-table-column>
            <el-table-column align="center" prop="operatorTime" min-width="100" label="运营商注册时间"></el-table-column>
            <el-table-column align="center" prop="operatorName" label="运营商名字"></el-table-column>
            <el-table-column align="center" prop="warehouseStateId" min-width="100" label="运营商状态"></el-table-column>
            <el-table-column align="center" prop="operatorPhone" min-width="100" label="运营商电话"></el-table-column>
            <el-table-column align="center" prop="operatorAddress" width="226" min-width="170" label="运营商地址"></el-table-column>
            <el-table-column align="center" prop="operatorLicence" min-width="100" label="运营商许可证"></el-table-column>
            <el-table-column align="center" prop="approveState" min-width="100" label="审核状态"></el-table-column>
            <el-table-column align="center" prop="remarks" min-width="100" label="备注"></el-table-column>
            <el-table-column align="center" label="操作" width="100">

              <template slot-scope="scope"> <!-- size="small" -->
                <el-button
                  size="mini" class="el-icon-edit"round
                  @click="handleEdit(scope.$index, scope.row)">审核</el-button>
<!--              <el-button-->
<!--                size="mini" class="operation-btn operation-btn-delete" round-->
<!--                type="danger"-->
<!--                @click="handleDelete(scope.$index, scope.row )">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 30]"
          :page-size=pagetRowNum
          layout="prev, pager, next,  sizes, total, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增 编辑 窗口 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" class="change-pwd" style="width:700px; align-content: center" >
      <table>
        <tr>
          <td width="10px;">&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td>
            <el-form :model="dialogForm" ref="dialogForm">
              <el-form-item label="请输入账号：" class="form-item" v-show="false">
                <el-input v-model="dialogForm.operatorId" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="请选择状态：" class="form-item">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
<!--                <el-input v-model="dialogForm.approveState" placeholder="请输入状态"></el-input>-->
              </el-form-item>
              <el-form-item label="备注" class="form-item">
                <el-input v-model="dialogForm.remarks" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-form>
            <div>
              <el-button @click="dialogCancel()">取消</el-button>
              <el-button type="primary" v-on:click="dialogSave()" :loading="addLoading">保存</el-button>
            </div>
          </td>
        </tr>
      </table>
    </el-dialog>
  </div>
  </div>
</template>

<script>
  //import { mapState } from 'vuex'
  var _index; //定义一个全局变量，以获取行数据的行号
  export default {
    name: '',
    components: {},
    props: {},
    data() {
      return {
        dialogTitle:'',//对话框标题
        dialogVisible: false,//是否显示新增窗口
        dialogForm: [],//对话框中的form 新增和编辑
        pageCurrentNum:'',//当前页码
        addLoading: false,
        selectForm: { //查询条件的form
          name: '',
          phone: '',
          classify: ''
        },
        tableData: [],
        tableDataList: [],
        tableDataSelect: [],
        currentPage4: 1,
        tabHeight: 1080,
        total: 0,
        pagetRowNum: 5,//每页显示的行数
        //cutLayout: false,
        options: [{
          value: '通过',
          label: '通过'
        }, {
          value: '不通过',
          label: '不通过'
        }],
        value: '',

//日期选择器
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        startDate: '',
        overdDate: '',
      }
    },
    computed: {
      //...mapState(['tableDataAllPage'])
    },
    watch: {},

    beforeCreate() {},
    beforeUpdate() {
      this.tabHeight = this.$refs.pageTab.offsetHeight - 137
    },
    beforeMount() {},
    mounted() {
      let _this = this
      window.onresize = function() {
        if (_this.$refs.pageTab) {
          _this.tabHeight = _this.$refs.pageTab.offsetHeight - 137
        }
      }

      initTable(this);//初始化列表
    },

    methods: {
      handleSizeChange(val) { //每页显示条数 变化事件
        console.log(`每页的行数 ${val} 条`)
        this.pagetRowNum= val;
        initTable(this);//改变每页的行数则 重新计算列表
      },
      handleCurrentChange(val) { //页码 变化事件
        console.log(`当前页: ${val}`)
        // this.tableDataList = this.tableDataAllPage[val-1].list;
        this.currentPage4=val;//当前页码
        initTable(this);
      },
      //查询
      onSelect() {

        console.log('onSelect 运营商审批查询框里的数是啥 ' + this.startDate+"结束日期："+this.overdDate );
        if(this.startDate >= this.overdDate){
          alert("时间出错")
          return false;
        }
        this.$axios.post("/OpShenCha", {
          tbOperator:{
            operatorTime: this.startDate,//取值
            overDate: this.overdDate,
          },
          pageInf:{
            page:this.currentPage4,
            size:this.pagetRowNum
          }
        }).then(resp =>{
          if (resp) {
            this.tableDataList = resp.data.SelectList
            this.total = resp.data.count
            console.log(this.total + "," + resp.data.SelectList)
          }
        }).catch(err =>{
          alert(err)
        })
      },
      //新增数据
      onAddRow() {
        _index=-1;//-1为新增
        this.dialogTitle='新增';
        this.dialogVisible = true;
        this.dialogForm = {
          name: '',
          phone1: '',
          phone2: '',
          address: '',
          remark: ''
        }
      },
      //编辑数据--------------------------------------------------------
      handleEdit(index, row) {
        console.log("handleEdit index:"+index+"  operatorAccount:"+row.operatorAccount);
        this.dialogTitle='修改';
        this.dialogVisible = true;
        this.dialogForm = Object.assign({}, row);
        _index = index;//用于判断是新增还是编辑
        //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
      },
      //取消按扭
      dialogCancel() {
        this.dialogVisible = false;//对话框 不显示
      },
      //对话框 保存按钮
      dialogSave(){
        if(_index==-1){
          this.sumbitAddRow(); //保存 新增
        }else{
          this.sumbitEditRow();//保存 编辑
        }
      },
      //将新增的数据添加到表格中
      sumbitAddRow() {
        console.log( "name: "+ this.dialogForm.name);
        var new_id=this.tableDataList[this.tableDataList.length-1].operatorId;
        new_id=  parseInt(new_id) + 1;//id 自动加 1
        console.log( "new_id "+ new_id);
        this.tableform = this.tableform || []
        this.tableDataList.push({
          id: new_id,
          name: this.dialogForm.name,
          phone1: this.dialogForm.phone1,
          phone2: this.dialogForm.phone2,
          address: this.dialogForm.address,
          remark: this.dialogForm.remark,
        })
        //storage.set('url', this.url);
        this.handleCurrentChange(this.tableDataAllPage.length);//页码变化事件 跳到最后一页
        this.dialogVisible = false;//对话框 不显示
      },
      //保存编辑
      sumbitEditRow() {
        console.log("sumbitEditRow _index:"+_index+"  name:"+this.dialogForm.operatorName);
        this.dialogVisible = false;//对话框 不显示
        //更新当前列表的行内容
        var editData_index = _index;//当前页的行号
        this.tableDataList[editData_index].operatorId = this.dialogForm.operatorId;
        this.tableDataList[editData_index].approveState = this.dialogForm.approveState;
        this.tableDataList[editData_index].remarks = this.dialogForm.remarks;
        changstate (this);
      },
    }
  }

  function changstate ($this) {
    $this.$axios.post("/changOAstate", {
      operatorId: $this.dialogForm.operatorId,
      approveState: $this.value,
      remarks: $this.dialogForm.remarks,
    }).then(resp => {
      if (resp) {
        console.log("修改的idwei：" + $this.dialogForm.operatorId)

        // $this.handleDateChange($this.currentPage4)
        alert("运营商审核成功")
        initTable($this);//初始化列表

      }else {
        alert("运营商审核成失败")
      }
    }).catch(err =>{
      alert(err)
    })
  }

  function initTable ($this) {
    $this.$axios.post('getOperatorList',{
      page: $this.currentPage4,
      size: $this.pagetRowNum
    }).then(resp =>{
      if (resp) {
        $this.tableDataList = resp.data.operatorList
        $this.total = resp.data.count
        console.log($this.total + "," + resp.data.operatorList)
      }
    }).catch(err => {
      alert(err)
    })
  }
</script>

